<template>
	<view class="circle" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="圈子"></HeadCustom>
		<SearchInput :keywords.sync="keywords" @del="getInit()" @search="getInit()" />
		<view class="list">
			<view v-if="listData.length || listConfig.loading == 'loading'">
				<scroll-view
					class="card-scroll"
					:scroll-top="scrollTop"
					scroll-y="true"
					:style="{ height: scrollHeight + 'px' }"
					@scrolltoupper="upper"
					@scrolltolower="lower"
					@scroll="scroll"
				>
					<view v-for="(item, index) in listData" :key="index">
						<view class="item fboxRow Ycenter">
							<view class="pic img_bg" @click="$pageTo('/circle?id=' + item.groupId)">
								<image
									class="inner"
									:src="item.groupAvatar"
									mode="aspectFill"
								></image>
								<!-- <view class="num fboxRow Ycenter Xcenter font22"> <u-icon name="account" size="14"color="#F7F9FF"></u-icon> {{item.memberCount}}</view> -->
							</view>
							<view
								class="fboxCol flex1"
								@click="$pageTo('/circle?id=' + item.groupId)"
							>
								<view class="font28 lh44 font-ell1 name">{{ item.groupName }}</view>
								<view class="font22 lh38 font-ell2 color-6B707C">
									{{ item.groupDesc }}
								</view>
							</view>
							<view
								v-if="!item.isWaitAudit && !item.isIn"
								class="btn fboxRow Ycenter Xcenter bg-linear font26"
								@click="join(item)"
							>
								加入
							</view>
							<view
								v-if="item.isWaitAudit"
								class="btn fboxRow Ycenter Xcenter btn-gray font26"
								@click="$pageTo('/circle?id=' + item.groupId)"
							>
								待通过
							</view>
							<view
								v-if="item.isIn"
								class="btn fboxRow Ycenter Xcenter btn-gray font26"
								@click="$pageTo('/circle?id=' + item.groupId)"
							>
								已加入
							</view>
						</view>
						<view class="line"></view>
					</view>
					<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
				</scroll-view>
			</view>
		</view>
		<view class="modal-black">
			<u-popup :show="isJoin" @close="isJoin = false" mode="center">
				<view class="join-Modal">
					<view class="close" @click="isJoin = false">
						<u-icon name="close" color="#6B707C" size="20"></u-icon>
					</view>
					<view class="hd font30 lh44 color-E8CDA7">申请加入圈子</view>
					<view class="bd">
						<view class="tips color-ACB4C7 font30 lh44">
							加入本圈子需要圈主批注。请写下您的加入理由：文字长度限100个字符（50个汉字）
						</view>
						<textarea
							class="text bg-21242C mt24"
							v-model="fromJoin.applyReason"
						></textarea>
					</view>
					<view class="ft mt32 fboxRow Xend">
						<view
							class="btn fboxRow Ycenter Xcenter btn-gray font26"
							@click="isJoin = false"
						>
							取消
						</view>
						<view
							class="btn fboxRow Ycenter Xcenter bg-linear color-141720 font26"
							@click="joinPost"
						>
							申请加入
						</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="isTips" @close="isTips = false" mode="center">
				<view class="join-Modal tips-modal">
					<view class="close" @click="isTips = false">
						<u-icon name="close" color="#6B707C" size="20"></u-icon>
					</view>
					<view class="bd">
						<view class="tips fboxRow Xcenter Ycenter font30 lh44">
							加入申请已提交，等待圈主确认
						</view>
					</view>
					<view class="ft fboxRow Xcenter">
						<view
							class="btn fboxRow Ycenter Xcenter bg-linear color-141720 font26"
							@click="isTips = false"
						>
							知道了
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<not-login ref="notLogin" />
	</view>
</template>

<script>
import SearchInput from '@/components/search/index.vue';
import { homeCircleList, circleJoin } from '@/api/mine.js';
import { debounce } from '@/static/js/common.js';
export default {
	components: { SearchInput },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			keywords: '',
			listConfig: {
				current: 1,
				size: 20,
				count: 0,
				loading: 'loadmore'
			},
			listData: [],
			isJoin: false,
			fromJoin: {
				groupId: '',
				applyReason: '',
				isAudit: 0
			},
			isTips: false,
			scrollHeight: 0,
			scrollTop: 0
		};
	},
	onLoad() {
		this.getInit();
	},
	onPullDownRefresh() {
		this.getInit();
		uni.stopPullDownRefresh(); //停止刷新
	},
	onReady() {
		uni.createSelectorQuery()
			.selectAll('.head-custom-wrap, .search-box')
			.boundingClientRect((res) => {
				console.log(res)

				uni.getSystemInfo({
					success: (sys) => {
						let height = sys.screenHeight

						res.filter((item) => {
							height = height - item.height

						})

						console.log(height);
						this.scrollHeight = height - 10

					}
				});
			})
			.exec();
	},
	methods: {
		join(item) {
			const bw_params = getApp().getBWData(['bw_params']).bw_params;
			if (bw_params && bw_params.access_token) {
				this.fromJoin.groupId = item.groupId;
				this.fromJoin.applyReason = ''

				this.fromJoin.isAudit = item.isAudit

				if (item.isAudit) {
					this.isJoin = true;
				} else {
					this.joinPost()

				}
			} else {
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				})

			}
		},
		joinPost: debounce(function (event) {
			circleJoin(this.fromJoin).then((res) => {
				if (res.data == 1) {
					this.isJoin = false;
					this.isTips = true;
				} else {
					uni.showToast({
						icon: 'none',
						title: '加入成功'
					});
				}
				this.listData.filter((item, index) => {
					if (item.groupId == this.fromJoin.groupId) {
						if (this.fromJoin.isAudit) {
							item.isWaitAudit = true

						} else {
							item.isIn = true;
						}
						this.listData.splice(index, 1, item)

					}
				});
			})

		}, 2000),
		getInit() {
			this.listConfig = {
				current: 1,
				size: 20,
				count: 0,
				loading: 'loadmore'
			}

			this.listData = [];
			this.getList();
		},
		getList() {
			homeCircleList({
				current: this.listConfig.current,
				size: this.listConfig.size,
				groupName: this.keywords
			}).then((res) => {
				if (this.listData.length) {
					this.listData = this.listData.concat(res.data.list)

				} else {
					this.listData = res.data.list

				}
				this.listLoading(res);
			});
		},
		listLoading(res) {
			if (res.data.total == 0) {
				this.listConfig.loading = 'list-not';
			} else if (
				res.data.total < res.data.size ||
				res.data.current * res.data.size >= res.data.total
			) {
				this.listConfig.loading = 'nomore';
			}
			this.listConfig.count = res.data.total

		},
		listMore() {
			const { current, size, count, loading } = this.listConfig

			if (loading == 'nomore') {
				return;
			}
			if (current * size < count) {
				this.listConfig.current = current + 1

				this.getList()

			} else {
				this.listConfig.loading = 'nomore';
			}
		},
		upper(e) {
			console.log('upper', e)

		},
		lower(e) {
			console.log('lower', e);
			this.listMore()

		},
		scroll(e) {
			// this.scrollTop = e.detail.scrollTop
		}
	}
};
</script>

<style lang="scss" scoped>
.color-1A1D25 {
	color: var(--controllerBgColor);
}
.list {
	padding: 0 40rpx;
}
.list .item {
	padding: 32rpx 0;
}
.list .pic {
	margin-right: 24rpx;
	width: 112rpx;
	height: 112rpx;
	position: relative;
}
.list .pic .inner {
	width: 112rpx;
	height: 112rpx;
	border-radius: 12rpx;
}
.list .pic .num {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
.list .btn {
	margin-left: 24rpx;
	width: 104rpx;
	height: 48rpx;
	border-radius: 8rpx;
}
.btn-gray {
	background: var(--translucenceButtonBackTwoColor);
	color: var(--contentFontLightColor);
}

.join-Modal {
	position: relative;
	padding: 40rpx 32rpx 48rpx;
	width: 670rpx;
	background: var(--controllerBgColor);
	border-radius: 12rpx;
}
.join-Modal .bd {
	margin-top: 48rpx;
}
.join-Modal .text {
	padding: 24rpx;
	width: 558rpx;
	height: 132rpx;
	border-radius: 12rpx;
}
.join-Modal .btn {
	width: 160rpx;
	height: 56rpx;
	border-radius: 8rpx;
}
.join-Modal .btn + .btn {
	margin-left: 24rpx;
}
.join-Modal .close {
	position: absolute;
	right: 32rpx;
	top: 32rpx;
}
.join-Modal.tips-modal .bd {
	margin-top: 100rpx;
}
.join-Modal.tips-modal .ft {
	margin-top: 60rpx;
}
</style>
